import React from 'react'
import {connect} from "react-redux"

// components
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"

// antd-mobile
import {Button, List, WhiteSpace} from "antd-mobile"


const SettingMain = props => {
    // props
    const {history,} = props
    // dispatch
    const {doLogoutGo,} = props

    const logout = () => {
        const uid = localStorage.getItem('userid')
        doLogoutGo({uid,})
    }

    const list = [
        // {title: '推送设置', path: 'push',},
        {title: '关于平台', path: 'about',},
        {title: '使用条款和隐私', path: 'privacy-policy',},
        {title: '用户协议', path: 'user-policy',},
        // {title: '清除缓存', path: 'buffer',},
    ]

    const template = list.map((item, index) => {
        const Item = List.Item
        return (
            <Item
                key={item.title}
                thumb={item.thumb}
                arrow="horizontal"
                // style={ItemStyle}
                onClick={() => history.push(`setting/${item.path}`)}
            >
                {item.title}
            </Item>
        )
    })

    return (
        <GoBackLayout
            history={history}
            title='通用设置'
        >
            <List>
                {template}
            </List>
            <WhiteSpace/>
            <Button onClick={logout}>退出登录</Button>
        </GoBackLayout>
    )
}

const mapDispatchToProps = ({user: {fetchUserDetail}, global: {doLogoutGo, doFreshToken,},}) => ({
    doLogoutGo: (id) => doLogoutGo(id),
})

export default connect(
    null,
    mapDispatchToProps,
)(SettingMain)
